EduChannel Indonesia Blog WeBooks LMS Pembelajaran Video
  • Pencarian
Versi

  • Informasi Buku
  • Pengantar HTML
    • HTML Pengantar
    • HTML Elemen
    • HTML Atribut
    • HTML Heading
    • HTML Style
    • HTML Formating
    • HTML Kutipan
    • HTML Komentar
    • HTML CSS
    • HTML Tautan
    • HTML Gambar
    • HTML Tabel
    • HTML List
    • HTML Block dan Inline
    • HTML Class
    • HTML Id
    • HTML Iframe
    • HTML Head
    • HTML Kode
    • HTML Semantic
  • Form HTML
    • HTML Form
    • HTML Form Elemen
  • HTML Media
    • HTML Video
    • HTML Audio
    • HTML Object
    • HTML Embed

Elemen Kutipan pada HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Dalam membuat konten pada halaman web dengan HTML sering kali kita melakukan pengutipan. Pada HTML terdapat beberapa elemen yang dapat digunakan untuk melakukan hal tersebut yaitu <blockquote>,<q>, <abbr>, <address>, <cite>, dan <bdo>.

Elemen <blockquote> dan <q> HTML

Elemen HTML <blockquote> digunakan untuk menandai kutipan yang panjang atau paragraf yang terpisah dalam dokumen pada halaman web. Saat digunakan, teks yang ditandai dengan elemen <blockquote> akan ditampilkan dalam bentuk blok terpisah dari teks utama, dengan gaya penulisan yang bervariasi tergantung pada stylesheet halaman web.

Contoh penggunaan elemen <blockquote>:

<p>Harper Lee, To Kill a Mockingbird:
<blockquote>
Anda tidak pernah benar-benar memahami seseorang sampai Anda mempertimbangkan hal-hal dari sudut pandangnya - hingga Anda memasukkan diri Anda ke dalamnya.
</blockquote>
</p>

Harper Lee, To Kill a Mockingbird:

Anda tidak pernah benar-benar memahami seseorang sampai Anda mempertimbangkan hal-hal dari sudut pandangnya - hingga Anda memasukkan diri Anda ke dalamnya.

Elemen <q> digunakan untuk menandai kutipan pendek dalam teks atau dokumen pada halaman web. Saat digunakan, teks yang ditandai dengan elemen <q> akan ditampilkan dalam tanda kutip.

<p><q>Karena, sesungguhnya sesudah kesulitan itu ada kemudahan. Sesungguhnya, sesudah kesulitan itu ada kemudahan.</q> - QS al-Insyirah: 5-6</p>

Kode diatas akan ditampilan sebagai berikut:

Karena, sesungguhnya sesudah kesulitan itu ada kemudahan. Sesungguhnya, sesudah kesulitan itu ada kemudahan. - QS al-Insyirah: 5-6

Elemen <cite> HTML

Elemen HTML <cite> digunakan untuk menandai sumber kutipan dalam dokumen pada halaman web. Elemen <cite> biasanya digunakan bersama dengan elemen <blockquote> atau <q> untuk menandai kutipan teks.

Contoh penggunaan elemen <cite>:

<p>Menurut <cite>Albert Einstein</cite>, "Fantasi lebih penting daripada pengetahuan."</p>

Kode diatas akan menghasilkan dokumen sebagai berikut:

Menurut Albert Einstein, "Fantasi lebih penting daripada pengetahuan."

Dalam contoh di atas, elemen <cite> digunakan untuk menandai kutipan dari Albert Einstein. Ketika digunakan untuk menandai judul karya seni, elemen <cite> dapat digunakan dalam kombinasi dengan elemen <i> atau <em> untuk menunjukkan teks miring.

Elemen <cite> berguna dalam situasi di mana penulis ingin menekankan bahwa teks tertentu berasal dari sumber tertentu atau merupakan kutipan langsung dari sumber tertentu. Penggunaan elemen <cite> dapat membantu memperjelas makna teks dan menunjukkan kepada pembaca di mana sumber informasi tersebut dapat ditemukan.

Elemen<abbr> HTML untuk Singkatan

Elemen HTML <abbr> digunakan untuk menandai singkatan atau akronim dalam dokumen pada halaman web. Saat digunakan, teks yang ditandai dengan elemen <abbr> akan menampilkan singkatan atau akronim tersebut dan dapat menampilkan informasi tambahan tentang singkatan atau akronim tersebut ketika pengguna mengarahkan kursor mouse ke atas teks tersebut.

Contoh penggunaan elemen <abbr>:

<p>Saya suka menonton film <abbr title="Marvel Cinematic Universe">MCU</abbr> karena mereka selalu menghadirkan petualangan dan aksi yang menegangkan.</p>

Kode diatas akan menghasilkan dokumen sebagai berikut:

Saya suka menonton film MCU karena mereka selalu menghadirkan petualangan dan aksi yang menegangkan. 

Dalam contoh di atas, elemen <abbr> digunakan untuk menandai singkatan MCU (Marvel Cinematic Universe) dalam teks. Atribut title juga digunakan untuk memberikan informasi tambahan tentang singkatan tersebut, yang akan ditampilkan sebagai tooltip ketika pengguna mengarahkan kursor mouse ke atas teks singkatan.

Elemen <abbr> dapat berguna dalam situasi di mana ada banyak singkatan atau akronim dalam dokumen, yang mungkin tidak familiar bagi sebagian pembaca. Dengan menggunakan elemen <abbr>, penulis dapat memberikan informasi tambahan tentang singkatan atau akronim tersebut dan membantu memastikan bahwa pembaca memahami makna teks dengan benar.

Elemen<address> HTML untuk Informasi Kontak atau Penulis

Elemen HTML <address> digunakan untuk menandai informasi kontak atau informasi tentang penulis atau pembuat dokumen dalam dokumen pada halaman web. Elemen <address> biasanya ditempatkan di bagian bawah halaman web, setelah teks utama.

Contoh penggunaan elemen <address>:

<address>
<strong>Edi Elisa</strong><br>
Jalan Udayana no 11<br>
Singaraja-Bali<br>
Email: info@edel.id<br>
Phone: 555-555-5555
</address>

Kode diatas akan menghasilkan dokumen web berikut:

Edi Elisa
Jalan Udayana no 11
Singaraja-Bali
Email: info@edel.id
Phone: 555-555-5555

Elemen <address> dapat digunakan untuk menandai informasi kontak untuk organisasi atau perusahaan, bukan hanya individu. Selain itu, elemen <address> juga dapat digunakan untuk menandai informasi tentang pembuat dokumen atau penulis, seperti nama, alamat email, atau tautan ke situs web atau profil media sosial.

Penggunaan elemen <address> pada halaman web dapat membantu memastikan bahwa informasi kontak atau informasi tentang penulis atau pembuat dokumen mudah ditemukan oleh pembaca dan memperkuat kepercayaan dan kredibilitas halaman web.

Elemen<bdo> HTML

Elemen HTML <bdo> (bidirectional override) digunakan untuk mengubah arah penulisan teks dalam dokumen pada halaman web. Dalam beberapa bahasa, teks ditulis dari kanan ke kiri, sementara dalam bahasa lain, teks ditulis dari kiri ke kanan. Elemen <bdo> memungkinkan penulis untuk mengubah arah penulisan teks untuk bahasa tertentu dalam dokumen yang ditulis dalam bahasa lain.

Contoh penggunaan elemen <bdo>:

<p>Ini adalah sebuah <bdo dir="rtl">teks dari kanan ke kiri</bdo>.</p>

Kode diatas akan menghasilkan tampilan seperti berikut:

Ini adalah sebuah teks dari kanan ke kiri.

Dalam contoh di atas, elemen <bdo> digunakan untuk mengubah arah penulisan teks menjadi dari kanan ke kiri. Atribut dir digunakan untuk menentukan arah penulisan teks, dan dapat diatur sebagai "rtl" (right-to-left) untuk menulis dari kanan ke kiri atau "ltr" (left-to-right) untuk menulis dari kiri ke kanan.

Elemen <bdo> berguna dalam situasi di mana dokumen menggunakan campuran bahasa dengan arah penulisan yang berbeda, seperti bahasa Arab. Dengan menggunakan elemen <bdo>, penulis dapat memastikan bahwa teks ditampilkan dengan benar dalam bahasa yang tepat dan arah penulisan yang tepat.

Copyright ©2022 #EduChannel Indonesia.
Bali - Indonesia